<template>
  <el-dialog
      :model-value="addDialogVisible"
      title="练车预约信息添加"
      width="50%"
      draggable
      center
      @close="handleClose"
  >
    <el-form ref="addfrom" :model="form" label-width="150px" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="预约编号：" prop="practiseId">
            <el-select v-model="form.practiseId" placeholder="">
              <el-option
                  v-for="item in practiselist"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约学员：" prop="userId">
            <el-select v-model="form.userId" placeholder="">
              <el-option
                  v-for="item in studentlist"
                  :key="item.userId"
                  :label="item.userId"
                  :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="预约结束时间：" prop="time">
            <el-date-picker
                v-model="form.time"
                type="date"
                placeholder=""
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleCommit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref} from "vue";
import {ElMessage} from "element-plus";
import {getAllPlace, InsertPractise} from "@/api/practise";
import {InsertOrderPractise} from "@/api/order_practise";
import {getAllStudent} from "@/api/student";
//获取父组件方法或传值
const props = defineProps({
  initGetStudents:{
    type:Function,
    required:true
  }
})
const practiselist = ref({})
const studentlist = ref({})
getAllPlace({pageNum:1,pageSize:99999}).then(res=>{
  if (res.code === 20041){
    practiselist.value = res.data.list
    console.log(practiselist.value)
  }else {
    ElMessage({
      message: '暂无可预约练车场',
      type: 'error',
    })
  }
})
getAllStudent({pageNum:1,pageSize:99999}).then(res=>{
  if (res.code === 20041){
    studentlist.value = res.data.list
    console.log(studentlist.value)
  }else {
    ElMessage({
      message: '暂无学员',
      type: 'error',
    })
  }
})


//初始化表单
const form = ref({})
const rules =ref({
  practiseId:[
    { required: true, message: '预约编号不能为空', trigger: 'blur' }
  ],
  userId:[
    { required: true, message: '预约学员号不能为空', trigger: 'blur' }
  ],
  time:[
    { required: true, message: '预约期限不能为空', trigger: 'blur' }
  ]
})
const Emits=defineEmits(['update:modelValue'])

const handleClose=()=>{
  Emits('update:modelValue',false)
}
const addfrom=ref(null)
//添加
const handleCommit=()=>{
  addfrom.value.validate(async (valid) => {
    if (valid) {
      await InsertOrderPractise(form.value).then(res=>{
        if(res.code===20011){
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
        }else {
          ElMessage({
            message: '添加失败',
            type: 'error',
          })
        }
        props.initGetStudents()
        addfrom.value.resetFields()
      }).catch(err=>{
        ElMessage({
          message: err,
          type: 'error',
        })
        addfrom.value.resetFields()
      })
    } else {
      console.log('error submit!')
    }
  })
  handleClose()
}
</script>

<style scoped>

</style>